<template>
  <t-layout class="common-layout">
    <header-layout />
    <t-layout class="layout-warp">
      <layout-side-nav />
      <layout-content />
      <notice-drawer />
    </t-layout>
  </t-layout>
</template>

<script setup lang="ts">
import HeaderLayout from './components/header/LayoutHeader.vue';
import LayoutSideNav from './components/side/LayoutSideNav.vue';
import LayoutContent from './components/content/index.vue';
import NoticeDrawer from './components/header/NoticeDrawer.vue';
// import { useTabsRouterStore } from '@store';

// const route = useRoute()
// const { appendTabRouterList } = useTabsRouterStore()

// const appendNewRoute = () => {
//   const {
//     path,
//     query,
//     meta: { title },
//     name,
//   } = route;
//   appendTabRouterList({ path, query, title: title, name: name as string, isAlive: true, meta: route.meta });
// };

// onMounted(() => {
//   appendNewRoute();
// });

// watch(
//   () => route.path,
//   () => {
//     appendNewRoute();
//     // document.querySelector(`.${prefix}-layout`).scrollTo({ top: 0, behavior: 'smooth' });
//   },
// );

</script>

<style lang="less" scoped>
.common-layout {
  height: 100%;
  width: 100%;

  .layout-warp {
    position: relative;
    height: calc(100% - var(--td-comp-size-xxxl));
  }

}
</style>
